.searchForm-container {
    @include flexInline();
    position: relative;
    height: 35px;
    width: calc(100% - 700px);
    max-width: 25%;
    margin-left: 10px;
    color: inherit
}

.searchForm-container.searchForm-container-adv {
    .searchForm-action-button-default { display: none }
    .searchForm-action-button { display: none }
}

.searchForm-container:not(.searchForm-container-adv) {
    .searchForm-action-button-advanced { display: none }
}

.search-form-fieldset {
    @include flexFill();
    @include flexInline();
    max-width: 100%;
    height: 35px;
    border-radius: 35px;
    background: $search-form-background;
}

.search-form-fieldset-input {
    @include flexFill();
    @include flexInline();
    @include flexJustifyCenter();

    padding: 0 0 0 2px;
    color: inherit;
    font-size: 14px;
    border-radius: 35px;

    /* reset */
    background: transparent;
    border:0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    min-width: 50px;

    /* placeholder */
    &::-webkit-input-placeholder,
    &:-moz-placeholder,
    &::-moz-placeholder,
    &:-ms-input-placeholder { color: $search-placeholder-color }
    &::-ms-clear { display: none; width:0; height:0 }
}


[class*="searchForm-action-button-"] {
    @include flexInline();
    @include flexAlignCenter();
    position: relative;
    z-index: 5;
    width: 35px;
    padding: 0;
    border:0;
    margin: 0;
    color: inherit;
    border: 0;
    cursor: pointer;
    background: transparent;
    transition: background-color .25s ease;
    outline:none;
    > i { margin: 0px auto }
}

.searchForm-icon { pointer-events: none }

.searchForm-action-button-toggle,
.searchForm-action-button-advanced,
.searchForm-action-button-clear {
    border-radius: 0px 35px 35px 0px;
    &:hover { background: darken($search-form-background, 70) }
}
.searchForm-action-button-advanced { display: none }


/* ADVANCED STATE */

.searchForm-container-adv {
    .search-form-fieldset {
        border-radius: 1rem 1rem 0 0;
        .search-form-fieldset-input { visibility: hidden }
        .searchForm-action-button-toggle { display: none }
        .searchForm-action-button-advanced { border-radius: 0 1rem 0 0 }
        .searchForm-action-button-advanced { display: inline-flex }
    }
}

.searchForm-advanced-container {
    position: absolute;
    left: 0;
    top: 0;
    box-shadow: $box-shadow;
    z-index: 2;
    border-radius: 1rem;
    padding: 35px 0 0;
    right: 0;
    label { color: $default-color }
    .input-icon { display: block }

    .autocompleteEmail-container .awesomplete {
        position: relative !important;
        margin: 0;
    }

    .autocompleteEmail-container [aria-selected] {
        line-height: 1.3;
    }

}

.searchForm-advanced-wrapper {
    background: #F2F2F2;
    float: left;
    padding: .5rem 1rem 1rem;
    width: 100%;
    border-radius: 0 0 1rem 1rem;
    > .row {
        line-height: 36px /* header#pm_header-desktop */
    }
    input[type],
    .pm_select { background: #FFF }
}

.searchForm-advanced-main {
    display: flex;
    flex-direction: column;
    padding: 1rem 1rem 0rem 1rem;
    background: $white;
    position: relative;
    box-shadow: 0 4px 4px -4px rgba(0,0,0,0.1);
}

.searchForm-advanced-wildcard-container {
    cursor: pointer;
}

.searchFrom-advanced-radio { line-height: 33px }

.searchForm-advanced-submit {
    margin-top: .5em;
    width: 100%;
}

/* Contextual reset button */
.searchForm-action-button-clear:not(.ng-not-empty) ~ .searchForm-clear-button {
    display: none
}


body:not(.appConfigBody-is-mobile) .searchFrom-advanced-radio label {
    display: inline-flex;
}

/* MOBILE STATE */
body.appConfigBody-is-mobile {
    .searchForm-container { position: static }
    .search-form-fieldset { display: none }
    .searchForm-advanced-container {
        top: 70px;
        max-height: calc(100vh - 70px);
        overflow: auto;
        box-shadow: none;
        border-radius: none;
        padding-top: 0;
    }
    .searchForm-advanced-wrapper {
        border-radius: 0;
        border-bottom: 1px solid $border;
        > .row  > [class*='col-'] {
            float: left;
            width: 100% !important;
            clear: both;
            padding: 0;
        }
    }
}
